<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>中国高等教育学会教育信息化分会 2017年校园卡工作组年会 直播测试 {{.WEBSITE}}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ����3��meta��ǩ*����*������ǰ�棬�κ��������ݶ�*����*������� -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/favicon.ico">

    <script type="text/javascript" src="/static/public/jquery-2.0.0.min.js"></script>
    <!-- Bootstrap core CSS 修改了bootstrap.min.css源文件里的pre-scrollable(垂直滚动条)部分，改高度340为800px-->

    <link href="/static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <!--bootstrap treeview-->
    <link rel="stylesheet" href="/static/bootstrap-treeview/dist/bootstrap-treeview.min.css" />
    <script src="/static/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <!--bootstrap treeview end-->
    <link href="/static/video-js/video-js.min.css" rel="stylesheet">
    <script src="/static/video-js/video.min.js"></script>
    <script>
        videojs.options.flash.swf = "/static/video-js/video-js.swf";
    </script>
    <style type="text/css">
        .div_center {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            /*必须要设置宽度才能够居中*/
        }
    </style>
</head>

<body style="background-color: #fcf8e3;">
    <div style="height: 1px;"></div>
    <div style="width:100%;">
        <img width="100%" src="/static/img/ykthy/logo1.png" />
    </div>
    <!--div class="container panel-success well">
        <div class="row clearfix vertical-middle-sm" style="background-image:'/static/img/ykthy/logo1.png'">
            <div style="margin-left:auto;margin-right:auto;width:auto;display: inline;">
                <img width="60px" height="60px" src="/static/img/ccnu1.png" />
            </div>
            <div style="display: inline;">
                <span style="font-size: 21px;">中国高等教育学会教育信息化分会 2017年校园卡工作组年会 直播测试</span>
            </div>
        </div>
    </div-->

    <div class="container">
        <div class="row clearfix">
            <!--注释掉树形列表div class="col-md-0 column">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-sound-dolby" style="text-shadow: black 5px 3px 3px;" aria-hidden="true"> 频道选择</span>
                    </div>
                    <div class="panel-body">
                        <div id="treeview" style="text-shadow: black 5px 3px 3px;"></div>
                    </div>
                </div>
            </div-->
            <div class="col-md-12 column">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <!--div id="toolbar" class="btn-group">
                            <button id="btn_play" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 播放
                            </button>
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_pause" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 暂停
                            </button>
                        </div-->
                        <div id="toolbar" class="btn-group" onclick="fullscreen()">
                            <button id="btn_add" type="button" class="btn btn-primary" style="text-shadow: black 5px 3px 3px;">
					            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> 全屏播放
				            </button>
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_scewm" type="button" class="btn btn-primary" style="text-shadow: black 5px 3px 3px;" data-toggle="modal" data-target="#myModal">
					            <span class="glyphicon glyphicon-phone" aria-hidden="true"></span> 微信扫码播放
				            </button>
                        </div>
                        <!--div id="toolbar" class="btn-group" onclick="">
                        <button id="btn_HD" type="button" class="btn btn-default" onclick="zhHD()">
                            <span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span> 高清
                        </button>
                        </div>
                        <div id="toolbar" class="btn-group" onclick="">
                        <button id="btn_CIF" type="button" class="btn btn-default" onclick="zhCIF()">
                            <span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span> 标清
                        </button>
                        </div-->
                    </div>
                    <div class="panel-body">
                        <div style="height: 5px;"></div>
                        <div class="div_center">
                            <!--
                    width="900px" height="100%" 
                    controls 表示自动添加播放控件。
                    加上 preload="auto" 可以让页面加载完成后立即开始加载视频，如果设置为 preload="meta" 则只加载视频元数据。 
                            -->
                            <video oncanplay="Oncanplay()" id="my-player" class="video-js vjs-big-play-centered" preload="auto" poster="" data-setup='{"techorder":["html5;flash"]}'>
                                <!--source src="http://l.kjdll.com/live/ccnu_hd.flv" type="video/flv"></source>
                                <source src="http://l.kjdll.com/live/ccnu.m3u8" type="application/x-mpegURL"></source-->
                                <!--实测WINDOWS网页播放不支持，仅手机端支持：source src="http://c.kjdll.com:8888/hls/ch1.m3u8" type="application/x-mpegURL"></source-->
                                <!--source src="/static/1.mp4" type="video/mp4"></source>
                                <source src="/static/2.mp4" type="video/webm"></source>
                                <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source-->
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that
                                <a href="http://videojs.com/html5-video-support/" target="_blank">
                                    supports HTML5 video
                                </a>
                                </p>
                            </video>
                        </div>
                        <!--div class="div_center"-->
                    </div>
                    <!--div class="panel-body"-->
                </div>
                <!--div class="panel panel-primary"-->
            </div>
        </div>
    </div>

    <div class="1container" style="background-color:rgb(255,204,77);">
        <hr style="color: beige;" style="padding-top: 0px;" />
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p class="text-center">

                </p>
                <p class="text-center">
                    <strong>华中师范大学信息办</strong>
                </p>
                <p class="text-center">
                    <strong>技术支持：熊义 13517246847</strong>
                </p>
            </div>
            <hr style="color: beige;" />
        </div>
    </div>

    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">微信扫码播放</h4>
                </div>
                <div class="modal-body">
                    <img id='imgEwm' src="/api/v1/qrcode?url=http://c.kjdll.com:8888/hls/test.m3u8" alt="微信扫码播放" />
                    <!--img id='imgEwm' src="/api/v1/qrcode?url=window.location.href" alt="微信扫码播放" /-->
                </div>
                <div class="modal-footer">
                </div>

            </div>
        </div>
    </div>
    <!-- Modal -->
    <script>
        function getTree() {
            // Some logic to retrieve, or generate tree structure
            var treeData = [{
                text: "直播测试",
                nodes: [{
                    text: "测试频道1",
                    nodes: [{
                        text: "无直播内容"
                    }, {
                        text: "无直播内容"
                    }]
                }, {
                    text: "华师校歌 南湖秋月"
                }]
            }];
            return treeData;
        };
    </script>

    <script>
        //Global Defaults
        videojs.options.autoplay = true;
        var $player = videojs('my-player', {
            techOrder: ["html5", "flash"],
            controls: false, //自动添加播放控件
            autoplay: true,
            preload: 'auto',
            width: '1000px',
            height: '500px',
            loop: false, //自动循环,假如Html5 中的video元素添加了 loop 属性(重复播放),那么  story_player.on("ended",function(){ alert("video is done");});将执行不到。
            //width: "1000px",
            //height: "600px",
            controlBar: {
                muteToggle: false
            },
            poster: "/static/img/ccnu1.png" //视频缩略图图
        }, function() {
            // Player (this) is initialized and ready.
        });
        var $Live = function(videojs_player) { //闭包，定义Live对象及一系列方法 
            return {
                Set_sources: function(Url) {
                    $.ajax({
                        type: "Get",
                        dataType: "json",
                        url: Url, // /api/v1/live/getLiveSources
                        data: {},
                        success: function(res) {
                            //console.log("返回数据：" + res);
                            if (res == null) {
                                //console.log("返回数据是空的：" + res); //返回的是JSON数据
                                return res;
                            } else {
                                //收到返回数据
                                console.log("接收到LIVE的SOURCES数据：" + res.toString());
                                videojs_player.src(res); //设置video.js的src为取得的api结果
                                videojs_player.play(); //video.js进行播放操作
                                return res;
                            }
                        }, //success
                        error: function(res) {
                            //出现错误！
                            //console.log("ajax出错！");
                            return -1;
                        }
                    }); //$.ajax
                }
            };
        }($player); //直接自执行闭包函数的调用
        videojs("my-player").ready(function() {
            //var myPlayer = this;
            //myPlayer.play();//ok
            //$player.play();//ok
            //$player.src($videoSrc.HD);
        });
        //播放器暂停事件
        /*
                function Oncanplay() {
                    alert("Oncanplay");
                }
                $player.on("pause", function() {
                    //alert("播放器暂停事件！");    //可用
                });
                $player.on("emptied", function() {
                    alert("emptied"); //当目前的播放列表为空时触发。
                });
                $player.on("playing", function() {
                    alert("playing"); //当音频/视频在因缓冲而暂停或停止后已就绪时触发。
                });
                $player.on("waiting", function() {
                    alert("waiting"); //当视频由于需要缓冲下一帧而停止时触发。
                });
                $player.on("abort", function() {
                    alert("abort"); //当音频/视频视频终止加载时发生，该事件是在多媒体数据终止下载时触发，而不是发生错误时触发。
                });
                $player.on("pause", function() {
                    alert("pause"); //当音频/视频已暂停时触发。
                });
                //已测试：可以用。当播放时关闭rtmp服务器，播放器在超时后触发error错误。
                $player.on("error", function() {
                    alert("error"); //当在音频/视频加载期间发生错误时触发。
                });*/
        $player.on("ended", function() {
            alert("ended"); //播放结束了
        });
        /*
                        $player.on("stalled", function() {
                            alert("stalled"); //如果浏览器不能获取媒体数据。当浏览器尝试获取媒体数据，但数据不可用时触发。
                        });
                        $player.on("suspend", function() {
                            alert("suspend"); //当浏览器刻意不获取媒体数据时触发。
                        });
                        $player.on("progress", function() {
                            alert("progress"); //当浏览器刻意不获取媒体数据时触发。
                        });
                        $player.on("loadstart", function() {
                            alert("loadstart"); //当浏览器开始查找音频/视频时触发。
                        });
                        $player.on('timeupdate', function() {
                            alert(player.currentTime());
                        });
                */

        /*注释掉树形列表
        $('#treeview').treeview({
            data: getTree()
        });*/
        $(function() {
            //页面完成载入后

            //this.play();
            //console.log("body宽度：" + $(document.body).width() + "px");
            //console.log($(document).width() + "px");
            //console.log("document.body.clientWidth：" + document.body.clientWidth + "px");
            //browserRedirect(); //检测手机端播放

            /*手机端不能自动播放，模拟点击播放按钮进行自动播放，无效*/
            //document.getElementById("btn_play").click();

            //设置二维码的链接网址
            //$('#imgEwm').attr("src", "/api/v1/qrcode?url=" + window.location.href); //window.location.host + window.location.pathname);
            $('#imgEwm').attr("src", "/api/v1/qrcode?url=" + "http://c.kjdll.com:8888/hls/test.m3u8");
            $Live.Set_sources("/api/v1/live/getLiveSources");

        });
    </script>

    <script>
        function zhHD() {
            //转换到高清播放
            //$player.reset(); //使用reset()后，原有的样式全没有，特别是控制工具栏，不能够用$player.controls(false);去掉，所以不能用
            $player.controls(false);
            $player.autoplay(true);
            $player.src($videoSrc.HD);
            //$player.load($videoSrc.HD.src);//不用这个，用src
            $player.play();
        };

        function zhCIF() {
            //转换到CIF播放
            //$player.reset();
            $player.controls(false);
            $player.autoplay(true);
            $player.src($videoSrc.M3U8);
            //$player.load($videoSrc.M3U8.src);//不用这个，用src
            $player.play();
        };

        function fullscreen() {
            //全屏
            //$('.vjs-play-control').click();   //暂停继续按钮，可以用
            $('.vjs-fullscreen-control').click(); //全屏
        };

        /*
                var btn_play = document.getElementById("btn_play");
                btn_play.addEventListener("click", function(e) {
                    // 调用播放器的play方法
                    //$player.reset();
                    $player.play();
                });

                var btn_pause = document.getElementById("btn_pause");
                btn_pause.addEventListener("click", function(e) {
                    // 调用播放器的pause方法
                    $player.pause();
                    //$player.stop();
                });
        */

        function phonePlay() {
            //转到手机播放
            location.href = "http://c.kjdll.com:8888/hls/test.m3u8";
        };

        function browserRedirect() {
            //检测是否为手机端播放
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
                //window.location.href=B页面;
                //alert("手机端播放！")
            }
        }
    </script>


</body>

</html>